import React from 'react';
import "./Login.css";
import {App, Button, Checkbox, Form, Input} from "antd";
import {LockOutlined, UserOutlined} from "@ant-design/icons";
import RequestHandler from "http/RequestHandler";
import {useNavigate} from "react-router-dom";
import LogFactory from "log/LogFactory";
import {LoginData} from "type/LoginSuccessData";
import UserStorage from "../../storage/local/UserStorage";

const log = LogFactory.getLogger("LoginComponent");
const LoginComponent = () => {
    const { message } = App.useApp();
    const navigate = useNavigate();
    const onFinish = async (values: LoginData) => {
        let res = await RequestHandler.login(values);
        log.debug("登录请求结果:", res.data);
        if(res.success){
            message.success("登录成功");
            UserStorage.getInstance().saveUser(res.data);


            // UserLoginDataStorage.saveSuccessLoginData(res.data);
            navigate("/nav");
        }
    };
    return (
        <div className={"login-container"}>
            <video className={"video-bg"}
                   style={{width: "100%", height: "100%", objectFit: "cover"}}
                   src={"http://192.168.2.199:8080/gvp/video/login-video.mp4"} autoPlay muted loop>
            </video>
            <div className="login-main">
                <h2>用户登录</h2>
                {/* <span>请使用用户名和密码登录</span> */}
                <hr/>

                <Form
                    name="normal_login"
                    className="login-form"
                    initialValues={{remember: true}}
                    onFinish={onFinish}
                    autoComplete="off"
                >
                    <Form.Item
                        name="username"
                        rules={[{required: true, message: '用户名必须填写!'}]}
                    >
                        <Input
                            autoComplete='new-username'
                            size='large' prefix={<UserOutlined className="site-form-item-icon"/>}
                            placeholder="请输入用户名"/>
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[{required: true, message: '登录密码必须填写!'}]}
                    >
                        <Input
                            autoComplete='new-password'
                            size='large'
                            prefix={<LockOutlined className="site-form-item-icon"/>}
                            type="password"
                            placeholder="请输入登录密码"
                        />
                    </Form.Item>
                    <Form.Item name="remember" valuePropName="checked" noStyle>
                        <Checkbox>记住用户名和密码</Checkbox>
                    </Form.Item>
                    <Form.Item>
                        <Button loading={false} type="primary" htmlType="submit" className="login-form-button">
                            登录
                        </Button>
                    </Form.Item>
                </Form>

            </div>
        </div>
    );
};

export default LoginComponent;